import { i18n } from "@/i18n";

export const pieChatOption = {
  legend: {
    orient: "horizontal",
    left: "center",
    top: "bottom",
    padding: [5, 12],
    textStyle: {
      fontSize: 12
    }
  },
  toolbox: {
    show: true,
    showTitle: false,
    feature: {
      saveAsImage: {
        show: true,
        title: i18n.global.t("form.statistics.saveAsImage")
      }
    },
    tooltip: {
      show: true,
      formatter: function (param: any) {
        return "<div>" + param.title + "</div>";
      },
      backgroundColor: "#FFF",
      textStyle: {
        fontSize: 12
      },
      extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
    }
  },
  tooltip: {
    trigger: "item",
    formatter: "{b}: {c} ({d}%)",
    backgroundColor: "rgba(255, 255, 255, 0.9)",
    borderColor: "#ccc",
    borderWidth: 1,
    textStyle: {
      color: "#666"
    }
  },
  series: [
    {
      name: i18n.global.t("form.statistics.num"),
      type: "pie",
      radius: ["40%", "70%"],
      center: ["50%", "45%"],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 2
      },
      label: {
        show: true,
        formatter: "{b}: {c} ({d}%)",
        fontSize: 12
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 14,
          fontWeight: "bold"
        },
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      data: []
    }
  ]
};

export const lineChatOption = {
  legend: {
    orient: "horizontal",
    left: "center",
    top: "bottom",
    padding: [5, 12],
    textStyle: {
      fontSize: 12
    }
  },
  toolbox: {
    show: true,
    showTitle: false,
    feature: {
      saveAsImage: {
        show: true,
        title: i18n.global.t("form.statistics.saveAsImage")
      }
    },
    tooltip: {
      show: true,
      formatter: function (param: any) {
        return "<div>" + param.title + "</div>";
      },
      backgroundColor: "#FFF",
      textStyle: {
        fontSize: 12
      },
      extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
    }
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(255, 255, 255, 0.9)",
    borderColor: "#ccc",
    borderWidth: 1,
    textStyle: {
      color: "#666"
    }
  },
  grid: {
    top: "5%",
    left: "3%",
    right: "4%",
    bottom: "15%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: [],
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    axisLabel: {
      color: "#666",
      fontSize: 12
    }
  },
  yAxis: {
    type: "value",
    minInterval: 10,
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#ddd"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    axisLabel: {
      color: "#666",
      fontSize: 12
    }
  },
  series: [
    {
      name: i18n.global.t("form.statistics.num"),
      type: "line",
      smooth: true,
      symbol: "circle",
      symbolSize: 8,
      lineStyle: {
        width: 3
      },
      itemStyle: {
        borderWidth: 2
      },
      areaStyle: {
        opacity: 0.1
      },
      data: []
    }
  ]
};

export const barChatOption = {
  legend: {
    orient: "horizontal",
    left: "center",
    top: "bottom",
    padding: [5, 12],
    textStyle: {
      fontSize: 12
    }
  },
  toolbox: {
    show: true,
    showTitle: false,
    feature: {
      saveAsImage: {
        show: true,
        title: i18n.global.t("form.statistics.saveAsImage")
      }
    },
    tooltip: {
      show: true,
      formatter: function (param: any) {
        return "<div>" + param.title + "</div>";
      },
      backgroundColor: "#FFF",
      textStyle: {
        fontSize: 12
      },
      extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);"
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    backgroundColor: "rgba(255, 255, 255, 0.9)",
    borderColor: "#ccc",
    borderWidth: 1,
    textStyle: {
      color: "#666"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "15%",
    top: "5%",
    containLabel: true
  },
  xAxis: {
    type: "category",
    data: [],
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    axisLabel: {
      color: "#666",
      fontSize: 12,
      interval: 0,
      rotate: 30
    }
  },
  yAxis: {
    type: "value",
    minInterval: 10,
    splitLine: {
      lineStyle: {
        type: "dashed",
        color: "#ddd"
      }
    },
    axisLine: {
      lineStyle: {
        color: "#999"
      }
    },
    axisLabel: {
      color: "#666",
      fontSize: 12
    }
  },
  series: [
    {
      name: i18n.global.t("form.statistics.num"),
      type: "bar",
      barWidth: "60%",
      itemStyle: {
        borderRadius: [4, 4, 0, 0]
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      },
      data: []
    }
  ]
};

export const chartOptionMap = {
  pie: pieChatOption,
  bar: barChatOption,
  line: lineChatOption
};
